<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid black;
            padding: 2px 4px;
            overflow-y: scroll;
            overflow-x: auto;
        }

        .log {
            margin-top: 8px;
            font-family: monospace;
        }

    </style>

</head>
<body>

    <h2>这个例子使用 innerHTML 创建一种机制用于将消息记录到网页上的框中。</h2>

    <input type="button" value="测试" onclick= log("LoggingMouseEventsInsideThisContainer...")>

    <div class="box">
        <div><strong>Log:</strong></div>
        <div class="log"></div>
    </div>


</body>
<script>
    function log(msg) {
        var logElem = document.querySelector(".log");
        var time = new Date();
        var timeStr = time.toLocaleTimeString();
        logElem.innerHTML += timeStr + ": " + msg + "<br/>";
    }

    function logEvent(event) {
        var msg = "Event <strong>" + event.type + "</strong> at <em>" +
            event.clientX + ", " + event.clientY + "</em>";
        log(msg);
    }

    var boxElem = document.querySelector(".box");

    boxElem.addEventListener("mousedown", logEvent);
    boxElem.addEventListener("mouseup", logEvent);
    boxElem.addEventListener("click", logEvent);
    boxElem.addEventListener("mouseenter", logEvent);
    boxElem.addEventListener("mouseleave", logEvent);

</script>


</html>